<template>
  <el-container>
    <el-header>
      <h2>用户信息</h2>
    </el-header>

    <el-main>
      <div>
        <p><strong>用户名:</strong> {{ user.name }}</p>
        <p><strong>邮箱:</strong> {{ user.email }}</p>
      </div>

      <h3>收藏餐厅</h3>
      <el-row>
        <el-col :span="8" v-for="(restaurant, index) in user.favoriteRestaurants" :key="index">
          <el-card :body-style="{ padding: '20px' }">
            <!-- 使用 public 目录中的图片 -->
            <img :src="'/images/' + restaurant.image" class="restaurant-img" />
            <div class="restaurant-info">
              <h3>{{ restaurant.name }}</h3>
              <p>评分: {{ restaurant.rating }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <h3>历史操作</h3>
      <ul>
        <li v-for="(operation, index) in user.history" :key="index">{{ operation }}</li>
      </ul>
    </el-main>
  </el-container>
</template>

<script>
import restaurantImage1 from '../assets/restaurant1.jpg';
import restaurantImage2 from '../assets/restaurant2.jpg';

export default {
  data() {
    return {
      user: {
        name: '用户A',
        email: 'user@example.com',
        favoriteRestaurants: [
          { name: '餐厅A', image: restaurantImage1, rating: 4.5 },
          { name: '餐厅B', image: restaurantImage2, rating: 4.7 },
        ],
        history: ['评论了餐厅A', '收藏了餐厅B'],
      },
    };
  },
};
</script>

<style scoped>
.restaurant-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
</style>
